<!--<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>-->
<style>
    html,body,#container{
        height:100%;
        width:100%;
    }
    /*.btn{*/
    /*    width:10rem;*/
    /*    margin-left:6.8rem;*/
    /*}*/
</style>
<body  onload="initMap()">
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Merchant_phone')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-merchant_phone" class="form-control" name="row[merchant_phone]" type="text" data-rule="required;mobile" placeholder="请输入手机号">
        </div>
    </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Merchant_password')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-merchant_password" class="form-control" name="row[merchant_password]" type="password" placeholder="不填密码默认和账号一样">
            </div>
        </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Shop_name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-shop_name" class="form-control" name="row[shop_name]" type="text">
        </div>
    </div>
<!--    <div class="form-group">-->
<!--        <label class="control-label col-xs-12 col-sm-2">{:__('City')}:</label>-->
<!--        <div class="col-xs-12 col-sm-8">-->
<!--            <div class='control-relative'><input id="c-city" class="form-control" data-toggle="city-picker" name="row[city]" type="text"></div>-->
<!--        </div>-->
<!--    </div>-->
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Merchant_name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-merchant_name" class="form-control" name="row[merchant_name]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Shop_logo')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::image('row[shop_logo]', null, ['data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Shop_banner')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::images('row[shop_banner]', null, ['data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Service')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::selectpickers('row[service][]', $serviceList, null, ['data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Open_time')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::timepicker('row[day_start_time]', '', ['data-rule'=>'required', 'class'=>'form-control-static'])}
            -
            {:Form::timepicker('row[day_end_time]', '', ['data-rule'=>'required', 'class'=>'form-control-static'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Night_time')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::timepicker('row[night_start_time]', '', ['data-rule'=>'required', 'class'=>'form-control-static'])}
            -
            {:Form::timepicker('row[night_end_time]', '', ['data-rule'=>'required', 'class'=>'form-control-static'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Signing_time')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::datetimepicker('row[signing_time]', '', ['data-rule'=>'required', 'class'=>'form-control', 'data-date-format'=>'YYYY-MM-DD'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Commission_rate')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-commission_rate" class="form-control" step="0.1" name="row[commission_rate]" type="number" value="" min="0">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Cancel_rate')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-cancel_rate" class="form-control" step="0.1" name="row[cancel_rate]" type="number" value="" min="0">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Stay_time')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-stay_time" class="form-control" step="1" name="row[stay_time]" type="number" value="" min="0">
        </div>
    </div>
    {if $group_id != 2}
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Alipay_account')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-alipay_account" class="form-control" name="row[alipay_account]" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Alipay_name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-alipay_name" class="form-control" name="row[alipay_name]" type="text" value="">
        </div>
    </div>
    {/if}
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Introduction')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-introduction" class="form-control" rows="5" name="row[introduction]" cols="50"></textarea>
        </div>
    </div>
<!--    <div class="form-group">-->
<!--        <label class="control-label col-xs-12 col-sm-2">{:__('Notice')}:</label>-->
<!--        <div class="col-xs-12 col-sm-8">-->
<!--            <textarea id="c-notice" class="form-control " rows="5" name="row[notice]" cols="50"></textarea>-->
<!--        </div>-->
<!--    </div>-->
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Traffic_notice')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-traffic_notice" class="form-control " rows="5" name="row[traffic_notice]" cols="50"></textarea>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::radios('row[radio]', $statuslist, 1, ['data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Street')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-address" class="form-control" name="row[address]" type="text" data-rule="required" placeholder="请填写全地址：例河南省郑州市金水区56号">
        </div>
        <div class="col-xs-12 col-sm-2">
            <button class="btn btn-success city_address" type="button">地址定位</button>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Longitude and latitude')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-point" class="form-control" name="row[point]" type="text" data-rule="required" readonly>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('定位')}:</label>
        <div class="col-xs-12 col-sm-9">
            <div id="container" style="height: 600px">
            </div>
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
<!--引入Javascript API GL，参数说明参见下文-->
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=ABOBZ-X5AW7-RXHXD-PMSO5-COQJO-PVBD7"></script>
<script charset="utf-8" src="/assets/libs/jquery/dist/jquery.min.js"></script>
<script>
    function initMap() {
        var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
        //初始化地图
        var map = new TMap.Map('container', {
            zoom: 14,
            // center: center,
        });
        var markerLayer = null;

        //绑定点击事件
        map.on("click",function(evt){
            //获取坐标
            var lat = evt.latLng.getLat().toFixed(6);
            var lng = evt.latLng.getLng().toFixed(6);

            if(markerLayer){
                markerLayer.setGeometries([]);//清空点标记
            }
            //添加点标记
            markerLayer = new TMap.MultiMarker({
                map: map,  //指定地图容器
                geometries: [{
                    "id": "66",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                    "styleId": 'myStyle66',  //指定样式id
                    "position": new TMap.LatLng(lat, lng),  //点标记坐标位置
                }
                ]
            });

            $("#c-point").val(lng + "," + lat)
            // console.log(lng + "," + lat);

            //逆地址解析
            convert(map, lng, lat);
        })

        //地址转换坐标并定位到地图
        $(".city_address").click(function (){
            if(markerLayer){
                markerLayer.setGeometries([]);//清空点标记
            }
            var address = $("#c-address").val();
            var geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
            geocoder.getLocation({ address: address })
                .then((result) => {
                    map.setCenter(result.result.location);
                    // console.log(result.result.location);
                    //添加点标记
                    markerLayer = new TMap.MultiMarker({
                        map: map,  //指定地图容器
                        geometries: [{
                            "id": "66",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                            "styleId": 'myStyle66',  //指定样式id
                            "position": new TMap.LatLng(result.result.location.lat, result.result.location.lng),  //点标记坐标位置
                        }
                        ]
                    });
                });
        });
    }


    //坐标转换地址
    function convert(map, lng, lat) {
        var geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
        var location = new TMap.LatLng(Number(lat), Number(lng));
        geocoder.getAddress({ location: location }) // 将给定的坐标位置转换为地址
            .then((result) => {
                // console.log(result.result.address);
                $('#c-address').val(result.result.address);
            });
    }
</script>
</body>
